<template>
  <div>
    <div class="text-right mb-2">
      <el-button class="btn-long" size="small" icon="el-icon-printer" @click="handlePrint">
        打印
      </el-button>
    </div>

    <div :id="printId">
      <h5 class="text-center">担保项目审批（评审）表</h5>
      <table class="table table-sm table-bordered vertical-align-middle text-center">
        <tbody>
          <tr>
            <td width="25%">借款人名称</td>
            <td colspan="3">{{ relatedData.customer_name || relatedData.customer_name }}</td>
          </tr>
          <tr>
            <td>申请金额</td>
            <td width="25%">{{ relatedData.apply_funds }}万元</td>
            <td width="25%">申请期限</td>
            <td width="25%">{{ relatedData.load_years }}年</td>
          </tr>
          <tr>
            <td>贷款实际用途</td>
            <td>{{ relatedData.funds_use_dir }}</td>
            <td>法定代表人</td>
            <td>{{ relatedData.corp_name }}</td>
          </tr>
          <tr>
            <td>贷款银行</td>
            <td>{{ relatedData.bank_name || '-' }}</td>
            <td>贷款利率（年）</td>
            <td>{{ relatedData.load_rate }}</td>
          </tr>
          <tr>
            <td>审批金额</td>
            <td>{{ relatedData.res_funds }}万元</td>
            <td>期限</td>
            <td>{{ relatedData.approval_load_years }}年</td>
          </tr>
          <tr>
            <td>担保费率</td>
            <td>{{ relatedData.gua_rate }}%</td>
            <td>评审费</td>
            <td>{{ relatedData.approval_fee }}元</td>
          </tr>
          <tr>
            <td>项目主审</td>
            <td>{{ relatedData.res_a_name }}</td>
            <td>项目辅审</td>
            <td>{{ relatedData.res_b_name }}</td>
          </tr>
          <tr>
            <td>反担保措施</td>
            <td colspan="3" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ relatedData.counter_guarantee || '-' }}
              </p>
            </td>
          </tr>
          <tr>
            <td>项目基本介绍</td>
            <td colspan="3" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.project_des || '-' }}
              </p>
            </td>
          </tr>
          <tr>
            <td>项目经理意见</td>
            <td colspan="3" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>项目经理A、B角签字：{{ data.res_person }}</div>
                <div>{{ $utils.dateFormat(data.res_date, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>业务部意见</td>
            <td colspan="3" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option_bus || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.res_person_bus }}</div>
                <div>{{ $utils.dateFormat(data.res_date_bus, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>风控部意见</td>
            <td colspan="3" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option_risk || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.res_person_risk }}</div>
                <div>{{ $utils.dateFormat(data.res_date_risk, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>负责人意见</td>
            <td colspan="3" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option_corp || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.res_person_corp }}</div>
                <div>{{ $utils.dateFormat(data.res_date_corp, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { printHtml } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    relatedData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      data: {},
    }
  },
  computed: {
    printId() {
      return `print-review-${this.relatedData.customer_related_id}`
    },
  },
  watch: {
    relatedData: {
      immediate: true,
      handler: function () {
        this.getData()
      },
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      const params = { 'customer_related_id.eq': this.relatedData.customer_related_id }

      this.$api.getData(this.$serviceName, 'customer_approval_view', params).then(res => {
        this.data = (res && res.data && res.data[0]) || {}
        this.data.res_funds = this.data.res_funds
          ? this.data.res_funds
          : this.relatedData.apply_funds
      })
    },
    handlePrint() {
      printHtml(
        document.getElementById(this.printId).innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
        .text-option {padding: 10px;}
      `
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.bg-gray {
  background-color: $gray-200;
}
.text-option {
  padding: 10px;
}
</style>
